<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: 60px;padding-top: 20px;background-color: #fff;">
        <!-- <div class="left" style="float: left;">
          <div class="top" style="border: 0px solid #000;margin-top: -15px;text-align: left;margin-bottom: 5px;">
            <el-select v-model="industry" placeholder="请选择行业" clearable v-on:change="getProcessList()">
              <el-option v-for="dictRow in industryList" :label="dictRow.dictValue" :value="dictRow.dictKey">
              </el-option>
            </el-select>
          </div>
          <div class="bottom" style="border: 0px solid #000;margin-left: 25px;">
            <div class="tit" style="border: 0px solid #000;text-align: left;">
              <span style="font-size: 16px;">项目阶段：</span>             
              <div class="jd" style="border: 0px solid #000;margin-left: 80px;margin-top: -20px;">
                <el-checkbox-group v-model="processList" @change="changeStatusInput()">
                  <el-checkbox v-for="item in processList" :key="item.salesProcessId" :label="item.salesProcessId">
                    {{item.processName}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

          </div>
        </div> -->
        <div class="right" style="float: right;">
          <el-button type="danger" class="button">导入</el-button>
          <!-- <el-input suffix-icon="el-icon-search" v-model="businessName" placeholder="请输入项目名称"
            @input="businessNameInput()"
            style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;position: relative;left: -120px;">
          </el-input>
          <el-button class="btn-upload" slot="trigger" size="small" type="primary" @click="output"
            style="position: relative;left: 0px;top: -17px;">下载模板</el-button>
          <el-upload class="upload-demo" action="api/crm/sales/insertExcel" :on-success="handleVideoSuccess"
            :file-list="fileList" :show-file-list="false">
            <el-button class="btn-upload" slot="trigger" size="small" type="primary"
              style="position: relative;top: -55px;">导入文件</el-button>

          </el-upload> -->

        </div>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" highlight-current-row tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" >
          <el-table-column type="index" width="55">
          </el-table-column>
          <el-table-column  label="项目名称" width="350">
            <template slot-scope="scope">
              <span style="color:#fe0100;">
                {{ scope.row.businessName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="项目阶段" width="120" align="center">
            <template slot-scope="scope">
              <span style="color: rgb(255, 136, 0);">
                {{scope.row.processName}}
              </span>
            </template>
          </el-table-column>
          <el-table-column  label="预期金额" width="160" align="right">
            
          </el-table-column>
          <el-table-column  label="所属省份" width="100" align="center">
          </el-table-column>
          <el-table-column label="所属县市" width="100" align="center">
          </el-table-column>
          <el-table-column label="客户" width="320" align="center">
          </el-table-column>
          <el-table-column label="销售员" width="120" align="center">
          </el-table-column>
          <el-table-column label="预计完成" :formatter="dateFormat" align="center">
          </el-table-column>
        </el-table>
        <!-- <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :current-page="current" :page-sizes="[10, 20, 30]"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    // name: 'staff',
    inject: ['reload'],
    data() {
      return {
        current: 1,
        size: 20,
        total: 0,
        currentRow: null,
        changeList: [], //销售机会列表
        processList: [],   //销售过程列表
        industryList: [],   //行业列表

        industry: '1',
        dictKey: '',
        businessName: '',
        salesProcessId: '',
        processName: '',
        fileList: [],
        // expecteEarn:''
      }
    },
    mounted() {
      // this.getChangeList()
      // this.getIndustryList()

    },
    // methods: {
    //   handleVideoSuccess(res, file) { //获取上传图片地址
    //     this.fileFlag = false;
    //     this.fileUploadPercent = 0;
    //     console.log(file)
    //     if (res.code == 200) {
    //       this.$message.success('文件上传成功！');
    //     } else {
    //       this.$message.error('文件上传失败，请重新上传！');
    //     }
    //   },
    //   output() {
    //     let link = document.createElement("a");
    //     link.target = "_blank"
    //     link.href = process.env.VUE_APP_SERVER_HOST + "/attach/template/BusinessOpportunityImportTemplate.xlsx";
    //     link.setAttribute("download", "");
    //     link.click();
    //   },
      
    //   //时间格式化
    //   dateFormat: function (row, column) {
    //     // debugger
    //     var date = row[column.property];
    //     if (date == undefined) {
    //       return "";
    //     }
    //     return moment(date).format("YYYY/MM/DD");
    //   },
    //   setCurrent(row) {
    //     this.$refs.singleTable.setCurrentRow(row);
    //   },
    //   handleSizeChange(val) {
    //     this.size = val
    //     this.getChangeList()
    //   },
    //   handleCurrentChange(val) {
    //     this.current = val
    //     this.getChangeList()
    //   },
    //   //行业
    //   async getIndustryList() {
    //     // 解构出参数
    //     const { current, size, dictVar } = this;
    //     var data = {
    //       current: current,
    //       size: size,
    //       dictVar: 'industry'
    //     }
    //     let result = await this.$API.dict.reqDictList(data)
    //     this.total = result.data.total;        
    //     this.industryList = result.data.data
    //     this.$ListToDict.ListToDict(this.industryList)
    //     this.getProcessList()

    //   },
    //   // 销售阶段
    //   async getProcessList() {
    //     // 解构出参数
    //     const { current, size, industry } = this;
    //     var data = {
    //       current: current,
    //       size: size,
    //       industry: industry
    //     }
    //     // alert(industry)
    //     var result = await this.$API.change.reqSellList(data)
    //     this.processList = result.data.data
    //   },
    //   // 搜索
    //   changeStatusInput() {
    //     this.getChangeList()
    //   },
    //   businessNameInput() {
    //     this.getChangeList()
    //   },


    //   // 获取销售机会列表
    //   async getChangeList() {
    //     // 解构出参数
    //     const { current, size, businessName, salesProcessId } = this;
    //     var data = {
    //       current: current,
    //       size: size,
    //     }
    //     if (businessName != '') {
    //       data.businessName = businessName
    //     } else if (salesProcessId != '') {
    //       data.salesProcessId = salesProcessId
    //     }
    //     let result = await this.$API.change.reqChangeList(data)
    //     this.total = result.data.total;
    //     this.changeList = result.data.data

    //   },
    //   handleSelectionChange(val) {
    //     console.log(val)
    //     this.currentRow = val;
    //     this.$router.push({
    //       path: '/change/details',
    //       name: 'details',
    //       query: {
    //         salesId: this.currentRow.salesId,
    //       }
    //     });
    //   }
    // }
  }

</script>
<style scoped>
  @import "../../../../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }
  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }
</style>